<template>
	<view>
		<view class="info-box">
			<view class="info-each">
				<view class="">企业/个体户 名称</view>
				<view class="input">
					<input v-model="name" type="text" placeholder="请输入" />
				</view>
			</view>
			<view class="wire"></view>
			<!-- <view class="info-each">
				<view class="">法人身份证号</view>
				<view class="input">
					<input v-model="idcard" type="text" placeholder="请输入" />
				</view>
			</view> -->
			<view class="wire"></view>
			<view class="info-each">
				<view class="">联系方式</view>
				<view class="input">
					<input v-model="mobile" type="number" placeholder="请输入" />
				</view>
			</view>
		</view>
		
		<view class="info-box">
			<view class="info-each">
				<view class="">工作地点</view>
				<view class="" @click="show = true">
					<text class="tint">{{city || '请选择'}}</text>
					<image src="../../../static/right-img.png" mode=""></image>
				</view>
			</view>
			<view class="wire"></view>
			<view class="introduce-box">
				<view class="">详细地址</view>
				<view class="textarea-box">
					<textarea v-model="address" name="" id="" cols="30" rows="10" placeholder="请输入"></textarea>
				</view>
			</view>
			<view class="wire"></view>
			<view class="introduce-box">
				<view class="">业务介绍</view>
				<view class="textarea-box">
					<textarea v-model="introduce" name="" id="" cols="30" rows="10" placeholder="请输入"></textarea>
				</view>
			</view>
		</view>
		
		<view class="info-box" style="margin-top: 24rpx">
			<view class="info-each">
				<view class="">营业执照</view>
				<view class="">
					<text class="tint">请上传营业执照</text>
				</view>
			</view>
			<view class="upimg-box">
				<view class="upimg">
					<u-upload width="65" height="65" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="1">
						<image src="../../../static/imgs.png" mode="widthFix" style="width: 130rpx; height: 130rpx"></image>
					</u-upload>
				</view>
			</view>
		</view>
		
		<view class="cotton"></view>
		<view class="btn-box" v-if="isBtn">
			<view class="btn" @click="save">提交</view>
		</view>
		<view class="btn-box" v-else>
			<view class="btn" @click="save">修改</view>
		</view>
		
		<!-- <u-picker keyName="name" :show="show" :columns="cityList" @confirm="confirm" @cancel="show = false"></u-picker> -->
		<u-picker keyName="name" :show="show" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler" @cancel="show = false"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList1:[],
				name:'',
				idcard:'',
				mobile:'',
				city:'',
				address:'',
				introduce:'',
				cityList:[],
				show: false,
				columnData: [],
				isBtn:true
			}
		},
		onLoad() {
			this.getcity()
			this.getInfo()
		},
		methods: {
			getInfo(){
				uni.$u.http.post('/user/company').then(res => {
					if (res.code === 1 && res.data) {
						this.name = res.data.name
						this.idcard = res.data.idcard
						this.mobile = res.data.mobile
						this.city = res.data.city
						this.address = res.data.address
						this.introduce = res.data.introduce
						this.fileList1 = [{
							url: this.oss(res.data.image),
							ful: res.data.image
						}]
						this.isBtn = false
					}
				}).catch((res) => {
							
				})
			},
			save() {
				if(this.name === '' ) {
					this.$u.toast('请输入公司名称');
					return
				}
				// if(this.idcard === '' ) {
				// 	this.$u.toast('请输入身份证号');
				// 	return
				// }
				if(this.mobile === '' ) {
					this.$u.toast('请输入联系方式');
					return
				}
				if(this.city === '' ) {
					this.$u.toast('选择城市');
					return
				}
				if(this.address === '' ) {
					this.$u.toast('请输入详细地址');
					return
				}
				if(this.introduce === '' ) {
					this.$u.toast('请输入公司介绍');
					return
				}
				if(this.fileList1.length < 1 ) {
					this.$u.toast('请上传营业执照');
					return
				}
				console.log(this.fileList1,'.........')
				let images = [];
				this.fileList1.forEach(item => {
					images.push(item.url)
				})
				uni.$u.http.post('/user/company', {
					image:images.join(','),
					name:this.name,
					// idcard:this.idcard,
					mobile:this.mobile,
					city:this.city,
					address:this.address,
					introduce:this.introduce,
					type:'send'
				}).then(res => {
					if (res.code === 1) {
						this.$u.toast(res.msg);
						setTimeout(() => {
							uni.navigateBack()
						},1000)
					}
				}).catch((res) => {
			
				})
			},
			changeHandler(e){
				console.log(e,'eeeeeeee')
				const {
                    columnIndex,
                    value,
                    values, // values为当前变化列的数组内容
                    index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
                    picker = this.$refs.uPicker
                } = e
                // 当第一列值发生变化时，变化第二列(后一列)对应的选项
                if (columnIndex === 0) {
                    // picker为选择器this实例，变化第二列对应的选项
                    picker.setColumnValues(1, this.columnData[index])
                }
			},
			confirm(e) {
			    console.log('confirm', e)
				this.city = e.value[0].name + e.value[1].name
			    this.show = false
			},
			getcity(){
				uni.$u.http.post('/index/cityList').then(res => {
					if (res.code === 1) {
						this.cityList = [res.data]
						this.cityList.push(res.data[0].children)
					}
				}).catch((res) => {
							
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
			
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				})
			
			
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
			
					console.log(result)
			
			
					if (result) {
						let item = this[`fileList${event.name}`][fileListLen];
						this[`fileList${event.name}`].splice(
							fileListLen,
							1,
							Object.assign(item, {
								status: 'success',
								message: '',
								url: result.url
							})
						)
			
			
						fileListLen++;
					} else {
						this[`fileList${event.name}`].splice(fileListLen, 1);
					}
				}
				console.log(this[`fileList${event.name}`]);
			},
			uploadFilePromise(url) {
				console.log(url);
			
				let that = this;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.Upload.uploadurl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							type: 'image',
							token: uni.getStorageSync('token')
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							console.log(res,data,'.........//////')
							if (res.statusCode === 200 && data.code === 1 && data.data) {
								resolve(data.data)
							} else {
								resolve()
							}
						}
					});
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}
	.info-box {
		width: 622rpx;
		padding: 29rpx 32rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		margin: auto;
		margin-top: 24rpx;
	
		.info-each {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
	
			.input {
				display: flex;
				align-items: center;
				text-align: right;
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
	
				text {
					display: inline-block;
					padding-left: 30rpx;
				}
			}
	
			image {
				width: 32rpx;
				height: 32rpx;
				position: relative;
				top: 7rpx;
				left: 20rpx;
			}
			.tint {
				font-size: 30rpx;
				font-weight: 500;
				color: #999999;
			}
		}
		.upimg-box {
			width: 622rpx;
			height: 191rpx;
			background: #F6F6F6;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			opacity: 1;
			border: 1rpx solid #F0F0F0;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 30rpx;
			.upimg {
				
			}
		}
	
		.wire {
			width: 622rpx;
			height: 1rpx;
			background-color: #f0f0f0;
			margin: auto;
			margin: 30rpx 0;
		}
	
		.tags-box {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			.tags {
				display: flex;
				margin-top: 24rpx;
				.tag {
					background-color: #f6f6f6;
					font-size: 30rpx;
					padding: 19rpx 48rpx 19rpx 24rpx;
					font-weight: 500;
					color: #333333;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					margin-right: 24rpx;
					image {
						width: 30rpx;
						height: 30rpx;
						position: relative;
						top: 7rpx;
						left: 20rpx;
					}
				}
			}
		}
	
		.introduce-box {
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
			.textarea-box {
				padding: 24rpx 0;
				height: 180rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
				
				textarea {
					height: 180rpx;
				}
			}
		}
	}
	
	.cotton {
		height: 160rpx;
	}
	.btn-box {
		width: 100%;
		position: fixed;
		bottom: 20rpx;
		z-index: 9;
	
		.btn {
			width: 686rpx;
			height: 98rpx;
			background: #febf4e;
			border-radius: 49rpx 49rpx 49rpx 49rpx;
			opacity: 1;
			margin: auto;
			text-align: center;
			line-height: 98rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}
	}
</style>